<template>
	<view>
		<view class="login_header" :style="{ paddingTop: StatusBar + 'px' }">
			<view class="header_box">
			<!-- 	<view class="header_back" @click="navigateBack()">
					<text class="iconfont icon-Left"></text>
				</view> -->
			</view>
		</view>
		<view class="login_content">
			<view class="content_title">手机验证登录</view>
			<view class="content_tips">未注册手机验证后自动注册登录</view>
			<view class="content_input">
				<u-input v-model="phone" placeholder="请输入手机号" type="number" maxlength="11">
					<u--text text="+86" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
				</u-input>
			</view>
			<view class="content_btn">
				<u-button :disabled="!(phone.length == 11) || (tips != '获取验证码' && tips != '重新获取')" class="btn_default" shape="square" @tap="getCode">{{tips}}</u-button>
			</view>
			<view class="content_text">
				<u-checkbox-group v-model="protocol">
					<u-checkbox  activeColor="#fdd637" label=""></u-checkbox>
					<text class="text_text">已阅读并同意，淘气游<text @click="navigateTo('tips', '?id=3')">《用户协议》</text>和 <text @click="navigateTo('tips', '?id=4')">《隐私协议》</text></text>
				</u-checkbox-group>
				
			</view>
		</view>
		<u-notify ref="uNotify" message="请先阅读并同意淘气游协议"></u-notify>
		<u-code :seconds="seconds" @end="end" @start="start" ref="uCode"  @change="codeChange"></u-code>
		<u-popup :show="show" mode="center" @close=close() :closeable="true">
			<view class="code_content">
				<u-code-input v-model="code" :focus="true"  :maxlength="6" @finish="codeFinish"></u-code-input>
				<view class="content_btn">
					<u-button :disabled="tips != '获取验证码' && tips != '重新获取'" class="btn_item" shape="square"  @tap="getCode">{{tips}}</u-button>
					<u-button  :disabled="!(code.length == 6) || (tips != '获取验证码' && tips != '重新获取') "  class="btn_item" shape="square">登 录</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import {send_code, send_login} from '@/api/login'
export default {
	data() {
		return {
			code: '',
			tips:"获取验证码",
			show: false,
			phone: "",
			protocol: [""],
			seconds: 60,
			url_data: {}
		};
	},
	onLoad(option) {
		if (option.url) {
			this.url_data = JSON.parse(option.url)
		}
	},
	methods: {
		close(){
			this.show = false
			this.code = ""
		},
		async getCode() {
			if (!this.protocol.length) {
				return this.$refs.uNotify.show({
					top: 0,
					type: 'error',
					color: '#fff',
					bgColor: '#fdd637',
					message: '请先阅读并同意淘气游协议',
					duration: 1000 * 3,
					fontSize: 12,
					safeAreaInsetTop:true
				})
			}
			if(this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				})
				let data = await send_code({phone: this.phone})
				if (data) {
					uni.hideLoading();
					uni.$u.toast('验证码已发送');
					this.$refs.uCode.start();
					this.show = true
				}
				uni.hideLoading();
			} else {
				uni.$u.toast('倒计时结束才能重新获取');
			}
		},
		codeChange(text) {
			this.tips = text;
		},
		async codeFinish(e){
			let data = await send_login({phone:this.phone,code: e})
			if(data) {
				uni.setStorageSync('token', data.data.token)
				if (this.url_data.path) {
					let str = ''
					if (this.url_data.query) {
						str = '?'
						for (let item in this.url_data.query) {
							if (item) {
								str += `${item}=${this.url_data.query[item]}&`
							}
						}
					}
				
					uni.redirectTo({
						url: this.url_data.path + str,
						fail: e => {
							uni.reLaunch({
								url: this.url_data.path + str,
							})
						}
					})
				} else {
					uni.reLaunch({
						url: '/pages/my/my'
					})
				}
			}
		},
		end() {
		},
		start() {
		}
	}
};
</script>

<style>

</style>
<style lang="scss" scoped>
.login_header {
	background: #fff;
	.header_box {
		display: flex;
		align-items: center;
		padding: 28rpx 50rpx;
		position: relative;
		font-weight: bold;
		.header_back {
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.header_title {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
}
.login_content {
	box-sizing: border-box;
	padding: 200rpx 50rpx 0;
	.content_title {
		font-size: 36rpx;
	}
	.content_tips {
		font-size: 24rpx;
		margin-top: 20rpx;
		color: rgb(153, 153, 153);
	}
	.content_input {
		margin-top: 40rpx;
		.u-input {
			background: #F3F4F9!important;
			border: none;
			padding: 24rpx 40rpx!important;
		}
	}
	.content_btn {
		font-weight: 800;
		font-size: 28rpx;
		color: #22150b;
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-top: 80rpx;

		.btn_default {
			height: 100rpx;
			background: #fdd637;
			border-radius: 10rpx;
			color: #22150b;
		}
	
	}
	.content_text {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.text_text {
			font-size: 24rpx;
			color: rgb(153, 153, 153);
			text {
				color: #fdd637;
			}
		}
	}
}
/deep/.u-popup__content {
	background: transparent!important;
}
.code_content {
	border-radius: 10rpx;
	background: #fff;
	padding: 100rpx 30rpx;
	.content_btn {
		display: flex;
		.btn_item {
			margin: 0 10rpx;
			flex: 1;
			border-radius: 10rpx;
			
			font-weight: 800;
			font-size: 28rpx;
			color: #22150b;
			&:nth-last-child(1) {
				background:  #fdd637;
			}
		}
		margin-top: 60rpx;
		
	}
}
</style>
